<template>
	<view class="container bg-white">
		<view v-for="(item, index) in pageValue.lists" :key="index">
			<template v-if="item.controller == 'Header'" >
				<!-- 文本 -->
				<cu-header :bgColor="item.attribute.bgcolor" :isBack="item.attribute.back" >
					<block slot="content" class="page-name">{{item.attribute.text}}</block>
				</cu-header>
			</template>
			<template v-if="item.controller == 'Bar'" >
				<!-- 文本 -->
				<cu-bar :title="item.attribute.text" hint="Modal" modal="3" :id="index"></cu-bar>
			</template>
			<template v-if="item.controller == 'Grid'" >
				<!-- 文本 -->
				<cu-grid :datas="item.data" ></cu-grid>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		onHome
	} from '@/utils/api.js';
	import cuGrid from '@/components/single/grid/cu-grid.vue'
	import cuBar from '@/components/single/bar/cu-bar.vue';
	export default {
		computed: {
			...mapState({
				pageValue: state => state.diy.pageValue
			})
		},
		components: {
			cuGrid,
			cuBar
		},
		data() {
			return {
				shareinfo: {
					title: 'ColorUI-Plus',
					desc: '',
					path: 'https://www.homeeyes.cn/app/livedemo/downloadapk.html',
					logo: 'https://www.homeeyes.cn/app/images/icon_logo.png'
				},
				pageGroup: {
					name: '自定义页面',
					auther: '张三',
					create_time: '2021-03-11',
					lists: [
					]
				}
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return this.shareinfo;
		},
		onLoad() {

			this.setModule(1);
		},
		onReady() {

		},
		onHide() {
			this.setModule(0);
		},
		onUnload() {
			this.setModule(0);
		},
		onShow() {
			this.onInit();
		},
		methods: {
			...mapMutations(['setModule', 'setPageValue', 'addPageElement']),
			onInit: function() {
				let that = this;
				this.setPageValue(this.pageGroup);
				this.addPageElement({
					controller: 'Header',
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: []
				});
				this.addPageElement({
					controller: 'Bar',
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: []
				});
				this.addPageElement({
					controller: 'Bar',
					attribute: {
						text: '测试标题',
						bgcolor: 'bg-gradual-blue',
						back: false
					},
					data: []
				});
				this.addPageElement({
					controller: 'Grid',
					attribute: {

					},
					data: [{
							title: '操作条',
							name: 'bar',
							color: 'cyan',
							cuIcon: 'newsfill'
						},
						{
							title: '卡片',
							name: 'card',
							color: 'blue',
							cuIcon: 'card'
						},
						{
							title: '按钮',
							name: 'button',
							color: 'red',
							cuIcon: 'btn'
						},
						{
							title: '气泡',
							name: 'chat',
							color: 'purple',
							cuIcon: 'font'
						},
						{
							title: '表单 ',
							name: 'from',
							color: 'mauve',
							cuIcon: 'cuIcon'
						}
					]
				});
			},onSelectElement:function(e){
				console.log("测试");
				console.log(e.currentTarget.dataset.index);
				
			},
			onCommit: function(e) {
				onHome().then((res) => {
					console.log(res);
				}).error((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style scoped>

</style>
